<template>
    <div id="nav">
        <ul class="items">
            <li v-for="(item, index) in items" :key="index">
                <img src="../assets/nav.png" alt="nav">
                <span>{{ item.name }}</span>
            </li>
        </ul>
    </div>
</template>


<script>

    export default {
        name: "Nav", // 指定组件名
        data: function () {
            return {
                items: [
                    {
                        name: "茶山",
                    },
                    {
                        name: "茶厂",
                    },
                    {
                        name: "茶庄",
                    },
                    {
                        name: "茶器",
                    },
                    {
                        name: "茶艺师",
                    },
                    {
                        name: "茶叶",
                    },
                    {
                        name: "品牌",
                    },
                    {
                        name: "茶博会",
                    },
                    {
                        name: "招商",
                    },
                    {
                        name: "社团",
                    },
                ]
            }
        }
    }

</script>

<style lang="less" scoped>
    #nav {
        background-color: #fff;
        width: 100vw;

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;

            li {
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                width: 20vw;
                height: 20vw;

                img {
                    width: 50%;
                }
            }
        }
    }
</style>